<script setup lang="ts">
import DisplayComponent from '@/layouts/DisplayComponent.vue';
const rawHtml = `
<template>
  <div class="demo-typography-container">
    <vi-typography>
      <h1>Heading 1</h1>
      <vi-typography-tooltip>
        <template #text>
          important
        </template>
        <template #tooltip>
          Hello
        </template>
      </vi-typography-tooltip>
      <div>thing</div>
    </vi-typography>
  </div>
</template>
<style scoped>
.demo-typography-container {
  padding: 30px;
}
</style>
`
</script>

<template>
  <DisplayComponent :rawHtml="rawHtml">
    <div class="demo-typography-container">
      <vi-typography>
        <h1>Heading 1</h1>
        <vi-typography-tooltip>
          <template #text>
            important
          </template>
          <template #tooltip>
            Hello
          </template>
        </vi-typography-tooltip>
        <div>thing</div>
      </vi-typography>
    </div>
  </DisplayComponent>

</template>

<style scoped>
.demo-typography-container {
  padding: 30px;
}
</style>
